<!--
 * @Author: wang_changtan 2196064304@qq.com
 * @Date: 2024-02-24 09:04:53
 * @LastEditors: wang_changtan 2196064304@qq.com
 * @LastEditTime: 2024-02-25 21:42:26
 * @FilePath: /web_music_app_vue3_vite_ts/src/views/detail/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="d_con">
        <div class="d_head">
            <img class="h_img" src="" />
            <div class="r">
                <div style="display:flex;align-items:center;" class="ell">
                    <span class="tag">歌单</span>
                    <span class="title">Viva La Vida | 勇敢的人先享受世界</span>
                </div>
                <div class="create">
                    <img src="" />
                    <span class="author">孤岛与海</span>
                    <span class="time">2019-12-12创建</span>
                </div>
                <div class="btn">
                    <div class="bf">
                        <svg t="1708857932631" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="62514" width="16" height="16">
                            <path
                                d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m0 981.333333C253.866667 981.333333 42.666667 770.133333 42.666667 512S253.866667 42.666667 512 42.666667s469.333333 211.2 469.333333 469.333333-211.2 469.333333-469.333333 469.333333z"
                                fill="#ffffff" p-id="62515" data-spm-anchor-id="a313x.search_index.0.i128.1bec3a810yhP75"
                                class="selected"></path>
                            <path
                                d="M672 441.6l-170.666667-113.066667c-57.6-38.4-106.666667-12.8-106.666666 57.6v256c0 70.4 46.933333 96 106.666666 57.6l170.666667-113.066666c57.6-42.666667 57.6-106.666667 0-145.066667z"
                                fill="#ffffff" p-id="62516" data-spm-anchor-id="a313x.search_index.0.i127.1bec3a810yhP75"
                                class="selected"></path>
                        </svg>
                        <span style="padding-left: 8px;">播放全部</span>
                    </div>
                    <div class="btn-ty">
                        <svg t="1708859037793" class="icon" viewBox="0 0 1137 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="68693" width="16" height="16">
                            <path
                                d="M327.466667 0A170.666667 170.666667 0 0 1 448 50.026667l64 64h455.146667a170.666667 170.666667 0 0 1 170.666666 170.666666V853.333333a170.666667 170.666667 0 0 1-170.666666 170.666667H170.666667A170.666667 170.666667 0 0 1 0 853.333333V170.666667A170.666667 170.666667 0 0 1 170.666667 0z m0 85.333333H170.666667a85.333333 85.333333 0 0 0-85.333334 85.333334v682.666666a85.333333 85.333333 0 0 0 85.333334 85.333334h796.48a85.333333 85.333333 0 0 0 85.333333-85.333334V284.48a85.333333 85.333333 0 0 0-85.333333-85.333333H512a85.333333 85.333333 0 0 1-60.266667-25.066667l-64-64A85.333333 85.333333 0 0 0 327.466667 85.333333z"
                                p-id="68694" :fill="themeName !== 'dark' ? '#797979' : '#b5b5b5'"></path>
                            <path
                                d="M568.853333 355.52a42.666667 42.666667 0 0 0-42.666666 42.666667v128h-128a42.666667 42.666667 0 0 0 0 85.333333h128v128a42.666667 42.666667 0 0 0 85.333333 0v-128h128a42.666667 42.666667 0 0 0 0-85.333333h-128v-128a42.666667 42.666667 0 0 0-42.666667-42.666667z"
                                p-id="68695" :fill="themeName !== 'dark' ? '#797979' : '#b5b5b5'"></path>
                        </svg>
                        <span style="padding-left: 8px;">收藏(123123)</span>
                    </div>
                    <div class="btn-ty">
                        <svg t="1708859181041" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="69695" width="14" height="14">
                            <path
                                d="M911.6 651.6l0 209.2c0 36-30.4 66.2-66.2 66.2l-699.6 1.2c-35.8 0-65-29.2-65-65.2l1.2-699.6c0-35.8 30.4-66.2 66.2-66.2l387 0L535.2 20.2 148.2 20.2c-81.8 0-143 82.8-143 156.8l0 686c0 77.6 63 140.8 140.8 140.8l686 0c82 0 156.6-68.2 156.6-143L988.6 651.6 911.6 651.6 911.6 651.6zM730.2 60.8l288.6 289.2L730.2 639l0-165.2c0 0-286.4-31.8-453.6 206.6 0 0 52.6-454.4 453.6-454.4L730.2 60.8 730.2 60.8z"
                                :fill="themeName !== 'dark' ? '#797979' : '#b5b5b5'" p-id="69696"></path>
                        </svg>
                        <span style="padding-left: 8px;">分享(123123)</span>
                    </div>
                    <div class="btn-ty">
                        <svg t="1708859241670" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="70699" width="16" height="16">
                            <path
                                d="M828.1 896.7H199.9c-73.2 0-132.8-59.6-132.8-132.8V514.5c0-17.7 14.3-32 32-32s32 14.3 32 32v249.4c0 37.9 30.9 68.8 68.8 68.8h628.2c37.9 0 68.8-30.9 68.8-68.8V514.5c0-17.7 14.3-32 32-32s32 14.3 32 32v249.4c0 73.2-59.6 132.8-132.8 132.8z"
                                p-id="70700" :fill="themeName !== 'dark' ? '#797979' : '#b5b5b5'"></path>
                            <path
                                d="M512.4 740.7c-17.7 0-32-14.3-32-32V151.8c0-17.7 14.3-32 32-32s32 14.3 32 32v556.9c0 17.7-14.3 32-32 32z"
                                p-id="70701" :fill="themeName !== 'dark' ? '#797979' : '#b5b5b5'"></path>
                            <path
                                d="M518.5 737.4c-8.2 0-16.4-3.1-22.6-9.4-12.5-12.5-12.5-32.8 0-45.3l156.9-156.9c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L541.1 728c-6.2 6.3-14.4 9.4-22.6 9.4z"
                                p-id="70702" :fill="themeName !== 'dark' ? '#797979' : '#b5b5b5'"></path>
                            <path
                                d="M506.2 737.2c-8.2 0-16.4-3.1-22.6-9.4L326.7 570.9c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l156.9 156.9c12.5 12.5 12.5 32.8 0 45.3-6.3 6.3-14.5 9.4-22.7 9.4z"
                                p-id="70703" :fill="themeName !== 'dark' ? '#797979' : '#b5b5b5'"></path>
                        </svg>
                        <span style="padding-left: 8px;">下载(123123)</span>
                    </div>
                </div>
                <div class="gqs">
                    <span>歌曲数：</span><span class="num"> 123</span>
                    <span style="padding-left: 30px;">播放数：</span><span class="num"> 123</span>
                </div>
                <div class="jj">
                    <span>简介：</span>
                    <span class="js">{{js }}</span>
                </div>
            </div>
        </div>
        <div class="d-body">
            <el-tabs v-model="activeName" class="d-tabs" @tab-click="handleClick">
                <el-tab-pane label="歌曲列表" name="list">
                    <MusicTable :tableData="tableData"/>
                </el-tab-pane>
                <el-tab-pane label="评论" name="tacking">评论</el-tab-pane>
                <el-tab-pane label="收藏者" name="start">收藏者</el-tab-pane>
              </el-tabs>
        </div>
    </div>
</template>
<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import type { TabsPaneContext } from 'element-plus'
import useGlobalStore from "../../store/modules/global";
import MusicTable from "../../components/MusicTable/index.vue";
//获取小仓库对象
let globalStore = useGlobalStore();
const themeName = computed(() => globalStore.themeName);


let js = ref('你爱的歌，值得反复聆听\n私人雷达，每日更新，收藏你的最爱');
let activeName = ref('list');
function handleClick(tab: TabsPaneContext, event: Event){
    console.log(tab, event)
}

let tableData = ref([
    {title:'xx',desc:'xx', no: '01',signer:'达到',time:'01:00'},
    {title:'xx',desc:'xx', no: '02'},
    {title:'xx',desc:'xx', no: '03'},
])

// 生命周期
onMounted(() => {

})

</script>

<style scoped lang="less">
.d_con {
    background: @mainBgColor;
    padding: 8px 0;
    height: calc(100% - 16px);
    width: 100%;
    overflow-y: auto;

    .d_head {
        display: flex;
        padding: 0 30px;
        width: calc(100% - 60px);

        .h_img {
            background: #d33a31;
            border-radius: 8px;
            width: 180px;
            height: 180px;
        }

        .r {
            padding-left: 30px;
            width: calc(100% - 210px);

            .tag {
                font-size: 10px;
                color: #d33a31;
                padding: 1px 5px;
                border-radius: 2px;
                border: 1px solid #d33a31;
            }

            .title {
                font-size: 20px;
                font-weight: 600;
                color: @color;
                padding-left: 10px;
            }

            .create {
                padding: 20px 0px;
                font-size: 12px;
                display: flex;
                align-items: center;

                img {
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    background: #f8f8f8;
                }

                .author {
                    color: #507daf;
                    cursor: pointer;
                    padding: 0 10px;
                }

                .time {
                    color: @fzFontColor;
                }

            }

        }
    }

    .btn {
        display: flex;
        align-items: center;

        .bf {
            display: flex;
            align-items: center;
            background: #d33a31;
            color: #fff;
            font-size: 13px;
            border-radius: 20px;
            padding: 3px 15px;
            cursor: pointer;

            &:hover {
                background-color: #d45048;
            }
        }

        .btn-ty {
            display: flex;
            align-items: center;
            font-size: 13px;
            border-radius: 20px;
            padding: 3px 15px;
            background: @mainBgColor;
            color: @color;
            cursor: pointer;
            border: 1px solid @fzFontColor;
            margin-left: 15px;

            &:hover {
                background-color: @btnHover;
            }
        }
    }
    .gqs {
        margin-top: 20px;
        font-size: 13px;
        color: @color;
    }
    .gqs .num{
        color: @fzFontColor;
    }
    .jj {
        margin-top: 8px;
        font-size: 13px;
        color: @color;
        .js {
            color: @fzFontColor;
        }
    }
    .d-body {
        padding-top: 30px;
        .d-tabs {
            :deep(.el-tabs__header){
                margin: 0 30px;
            }
            :deep(.el-tabs__item){
                color: @color;
            }
            :deep(.is-active){
                color: #d33a31;
            }
            :deep(.el-tabs__active-bar){
                background-color: #d33a31;
            }
            :deep(.el-tabs__nav-wrap::after){
                height: 1px;
                background: @defBorderColor;
            }
            :deep(.el-table__inner-wrapper){
                padding: 0 30px;
            }
        }
    }
}</style>